import React from 'react';
import styled from 'styled-components';
import { connect } from 'dva';
import Panel from './Panel';

const statusStyle = isRuning => ({
  display: 'inline-block',
  width: 12,
  height: 12,
  borderRadius: '50%',
  backgroundColor: isRuning ? 'green' : 'red',
});

const Wrapper = styled.div`
  display: flex;
  height: 204px;
  flex-direction: column;
  justify-content: space-around;
  padding: 24px;
`;

const StyledSelect = styled.select`
  width: 100%;
  line-height: 40px;
  height: 40px;
`;

const Task = ({ isRuning }) => (
  <Panel title="TASK">
    <Wrapper>
      <StyledSelect value="1" style={{}}>
        <option value="1">
          Automated Sorting
        </option>
      </StyledSelect>
      <div>
        <span style={{ fontSize: '40px', color: 'grey' }}>1min 20sec</span>
        <span style={statusStyle(isRuning)} />
      </div>
    </Wrapper>
  </Panel>
);

export default connect(
  state => ({
    isRuning: state.app.isRuning,
  }),
)(Task);
